<template>
    <el-dialog
      :title="title"
      :before-close="handleClose"
      :visible="typeDialog"
      :width="handleScreenWidthToVw(350)+'px'"
    >
        <el-form  ref="form" :rules="rules"  :model="formData" :label-width="handleScreenWidthToVw(100)+'px'" >
            <el-form-item label="类型名称" prop="typeName">
                <el-input v-model="formData.typeName" placeholder="请输入类型名称" class="input-width" />
            </el-form-item>
            <el-form-item label="产品规格" prop="specification">
                <el-input v-model="formData.specification" placeholder="请输入产品规格" class="input-width" />
            </el-form-item>
            <el-form-item label="单位" prop="unit">
                <el-input v-model="formData.unit" placeholder="请输入单位" class="input-width" />
            </el-form-item>
            <el-form-item>
                    <el-button size="mini" type="primary" @click="success('form')">保存</el-button>
                    <el-button size="mini" @click="handleClose()">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { handleScreenWidthToVw } from '@/utils/tools'
import { getTypeInfo,AddType,updateType } from '../api'
export default {
      props: {
            title: { type: String, default: '新增类型' },
            typeDialog: { type: Boolean, default: false },
            typeId: { type: String, default: '0'}
        },
    data() {
        return {
            formData:{},
            rules: {
                typeName: [
                    { required: true, message: '请输入类型名称', trigger: 'blur' }
                ],
                specification: [
                    { required: true, message: '输入产品规格', trigger: 'blur' }
                ],
                unit: [
                    { required: true, message: '请输入产品单位', trigger: 'blur' }
                ],
            },
        }
    },
computed: {
    handleScreenWidthToVw() {
        return handleScreenWidthToVw
    },
},
mounted(){
},
methods: {
    success(form){
        this.$refs[form].validate((valid) => {
            if (valid) {
            if(this.title === '新增类型') {
               AddType(this.formData).then(res=>{
                   console.log(res);
                   if(res) {
                    this.$message({
                        message: '新增成功！',
                        type: 'success'
                    })
                     this.$emit('updata')
                   }else{
                    this.$message({
                        message: '新增失败！',
                        type: 'info'
                    })
                   }
               })
            }else{
                updateType(this.formData).then(res=>{
                    if(res) {
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    })
                     this.$emit('updata')
                   }else{
                    this.$message({
                        message: '修改失败！',
                        type: 'info'
                    })
                   }
                })
            }
            this.handleClose()
            } else {
                return false;
            }
        });
    },
    handleClose() {
        this.$refs.form.resetFields();
        this.$emit('dateDialog')
     },
     drawPid(id){
         getTypeInfo({productTypeId:id}).then(res=>{
             this.formData = res
         })
     }
    }
}
</script>
<style scoped>
::v-deep .el-dialog{
    border-radius: 5px;
}
</style>
